<template>
  <div
      class="card"
      :class="{
      card__active: card.active,
      card__selected: selected
    }"
  >
    <card-front :card="card" @click.native="toggleCard({ card })"/>
    <card-back :card="card" :is-follow="isFollow" @handleClick="handleClick"/>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import CardFront from './CardFront.vue'
import CardBack from './CardBack.vue'

export default {
  components: {
    CardFront,
    CardBack
  },
  props: {
    card: {
      type: Object
    },
    selected: {
      type: Boolean
    }
  },
  methods: {
    ...mapMutations(['toggleCard']),
    handleClick() {
      const appRect = document.querySelector('#app').getBoundingClientRect()
      const elRect = this.$el.getBoundingClientRect()
      const card = this.card
      const rect = {}
      rect.top = elRect.top - appRect.top
      rect.left = elRect.left - appRect.left
      rect.width = elRect.width
      rect.height = elRect.height
      rect.appWidth = appRect.width
      rect.appHeight = appRect.height
      this.$emit('select', {rect, card})
    }
  },
  computed: {
    ...mapState(['cards', 'followList']),
    isFollow() {
      return this.followList.some(value => value === this.card.user.uid)
    }
  }
}
</script>

<style lang="less">
.card {
  position: relative;
  width: 100%;
  height: 100%;
}

.card__selected {
  visibility: hidden;
}

.card__active {
  .card_back {
    transform: scale(1);
    opacity: 1;
  }

  .card_front {
    transform: translate3d(0, -100px, 0);
  }
}
</style>
